/*
 * @Author:samfeng
 * @Date: 2022-09-29 13:55
 * @LastEditTime: 2021-05-01 20:42:22
 * @LastEditors: Please set LastEditors
 * @Description: 结账第三部分页面
 */

import 'package:first_flutter_app/constant/dataInfo.dart';
import 'package:first_flutter_app/controller/orderPageController.dart';
import 'package:first_flutter_app/util/IconText.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class RightPayPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(
          color: Color.fromRGBO(233, 236, 245, 1),
        ),
      ),
      width: 743.w,
      height: 1900.h,
      child: Column(
        children: [
          Tophead(context),
          PaymentType(context),
          InputMoney(context),
          NumPad(context)
        ],
      ),
    );
  }

  // 头部展示
  Widget Tophead(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(
        top: 20.h
      ),
      child: GetBuilder<OrderController>(
        builder: (_) => Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Container(
              child: IconText(
                "未开通发票",
                icon: Icon(
                  Icons.help,
                  color: Colors.orange,
                ),
                iconSize: 15.0,
                direction: Axis.horizontal,
                style: TextStyle(
                  color: Colors.black54,
                  fontSize: 55.sp,
                  fontWeight: FontWeight.w600
                ),
              ),
            ),
            Column(
              children: [
                Container(
                  child: Center(
                    child: Text(
                      "应收：" + OrderController.oc.amountTotal.toString(),
                      style: TextStyle(
                          color: Colors.orange,
                          fontSize: 120.sp,
                          fontWeight: FontWeight.w600
                      ),
                    ),
                  ),
                ),
                Container(
                  padding: EdgeInsets.only(
                    top: 20.h
                  ),
                  child: Center(
                    child: Text(
                      "已付：￥" + OrderController.oc.hasPay.toString(),
                      style: TextStyle(
                        fontSize: 50.sp,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            Container(
              height: 100.h,
              width: 150.w,
              child: ElevatedButton(
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.resolveWith((states) {
                    //设置按下时的背景颜色
                    if (states.contains(MaterialState.pressed)) {
                      return Colors.white70;
                    }
                    //默认不使用背景颜色
                    return Colors.white;
                  }),
                ),
                onPressed: () {
                  OrderController.oc.moLing();
                },
                child: Text(
                  "抹零",
                  style: TextStyle(
                    color: Colors.blue
                  ),
                ),
              ),
            )
          ],
        )
      )
    );
  }

  // 第二部分
  Widget PaymentType(BuildContext context) {
    return Row(
      children: [
        Container(
          padding: EdgeInsets.only(
            top: 80.sp,
            left: 10.w,
          ),
          child: Text(
            "<<",
            style: TextStyle(
              color: Colors.black38,
              fontSize: 50.sp,
            ),
          ),
        ),
        Container(
            height: 300.h,
            width: 650.w,
            padding: EdgeInsets.only(
                top: 80.sp,
                left: 10.w,
                // right: 30.w
            ),
            child: ListView.builder(
              shrinkWrap: true,
              scrollDirection: Axis.horizontal,
              itemBuilder: (context, index) {
                return PaymentWidget(
                    context,
                    payTypeList[index]["type"],
                    payTypeList[index]["image"]
                );
              },
              itemCount: payTypeList.length,
            )
        ),
        Container(
          padding: EdgeInsets.only(
            top: 80.sp,
            left: 10.w,
          ),
          child: Text(
            ">>",
            style: TextStyle(
              color: Colors.black38,
              fontSize: 50.sp,
            ),
          ),
        )
      ],
    );
  }

  Widget BakPaymentWidget(BuildContext context, String bottomText, String imageUrl) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Image(
            image: AssetImage(imageUrl),
            width: 50.w
        ),
        Text(
          bottomText,
          style: TextStyle(
              fontSize: 40.sp,
              color: Colors.black54
          ),
        ),
      ],
    );
  }

  Widget PaymentWidget(BuildContext context, String bottomText, String imageUrl) {
    return GetBuilder<OrderController> (
      builder: (_) => Container(
          width: 80.w,
          margin: EdgeInsets.only(
              left: 30.sp,
              right: 30.sp
          ),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(4.0)),
            color: Colors.black12,
          ),
          child: InkWell(
            onTap: () {
              OrderController.oc.updatePaymentStr(bottomText);
            },
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image(
                    image: AssetImage(imageUrl),
                    width: 50.w
                ),
                Text(
                  bottomText,
                  style: TextStyle(
                      fontSize: 40.sp,
                      color: Colors.black54
                  ),
                ),
              ],
            ),
          )
      ),
    );
  }

  // 第三部分(输入框)
  Widget InputMoney(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(
        top: 50.h,
        left: 50.w,
        right: 60.w,
        bottom: 50.h
      ),
      child: Column(
        children: [
          GetBuilder<OrderController>(
              builder: (_) => Container(
                height: 200.h,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(6.0)),
                  color: Colors.white,
                  border: Border.all(
                    color: Colors.lightBlue,
                  ),
                ),
                child: Row(
                  children: [
                    Container(
                      width: 120.w,
                      padding: EdgeInsets.only(
                        left: 50.sp,
                      ),
                      child: Text(
                        OrderController.oc.paymentStr,
                        style: TextStyle(
                          fontSize: 50.sp,
                          fontWeight: FontWeight.w600
                        ),
                      )
                    ),
                    Container(
                      child: Text(
                        "￥",
                        style: TextStyle(
                            fontSize: 100.sp,
                            fontWeight: FontWeight.w600
                        ),
                      ),
                    ),
                    Container(
                      width: 400.w,
                      child: Text(
                        OrderController.oc.inputTotal.toString(),
                        style: TextStyle(
                            fontSize: 100.sp,
                            fontWeight: FontWeight.w600
                        )
                      ),
                    ),
                    InkWell(
                      onTap: () {
                        OrderController.oc.updateInputTotal("0.0");
                      },
                      child: Container(
                        height: 40.w,
                        width: 40.w,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(50.0)),
                          color: Colors.black26,
                        ),
                        child: Center(
                          child: Text(
                            "X",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 60.sp,
                            ),
                          ),
                        )
                      )
                    )
                  ],
                ),
              )
          ),
          Container(
            padding: EdgeInsets.only(
              top: 80.sp,
              // bottom: 30.sp
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(4.0)),
                    border: Border.all(
                      color: Color.fromRGBO(233, 236, 245, 1),
                    ),
                  ),
                  child: InkWell(
                    onTap: () {
                      OrderController.oc.updateInputTotal("100.0");
                    },
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                      child: Text(
                        "￥100"
                      ),
                    ),
                  ),
                ),
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(4.0)),
                    border: Border.all(
                      color: Color.fromRGBO(233, 236, 245, 1),
                    ),
                  ),
                  child: InkWell(
                    onTap: () {
                      OrderController.oc.updateInputTotal("150.0");
                    },
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                      child: Text(
                          "￥150"
                      ),
                    ),
                  ),
                ),
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(4.0)),
                    border: Border.all(
                      color: Color.fromRGBO(233, 236, 245, 1),
                    ),
                  ),
                  child: InkWell(
                    onTap: () {
                      OrderController.oc.updateInputTotal("200.0");
                    },
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                      child: Text(
                          "￥200"
                      ),
                    ),
                  ),
                ),
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(4.0)),
                    border: Border.all(
                      color: Color.fromRGBO(233, 236, 245, 1),
                    ),
                  ),
                  child: InkWell(
                    onTap: () {
                      OrderController.oc.updateInputTotal("250.0");
                    },
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                      child: Text(
                          "￥250"
                      ),
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  // 数字键盘
  Widget NumPad(BuildContext context) {
    return Row(
        children: [
          Container(
            width: ScreenUtil().setWidth(480),
            margin: EdgeInsets.only(
              left: ScreenUtil().setSp(80),
              top: ScreenUtil().setSp(50),
            ),
            child: Wrap(
              runSpacing: ScreenUtil().setSp(20),
              spacing: 20.sp,
              children: [
                numClick("1"),
                numClick("2"),
                numClick("3"),
                numClick("4"),
                numClick("5"),
                numClick("6"),
                numClick("7"),
                numClick("8"),
                numClick("9"),
                iconPointClick(),
                numClick("0"),
                iconBackClick(Icon(
                  Icons.keyboard_return,
                  size: ScreenUtil().setSp(80),
                )),
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(
              top: ScreenUtil().setSp(50),
            ),
            width: 200.w,
            height: 660.h,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(4.0)),
              color: Colors.orangeAccent,
            ),
            child: InkWell(
              child: Center(
                child: Text(
                "结账",
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 100.sp,
                  )
                ),
              )
            ),
          )
        ],
      );
  }

  // 数字按钮
  Widget numClick(String num) {
    return GetBuilder<OrderController>(
      builder: (_) => InkWell(
        focusColor: Colors.black54,
        hoverColor: Colors.black54,
        splashColor: Colors.blue,
        onTap: () {
          OrderController.oc.contactInputTotal(num);
        },
        child: Container(
          padding: EdgeInsets.only(top: 35.sp),
          width: 150.w,
          height: 150.h,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black12, width: 1),
          ),
          child: Text(
            num,
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 60.sp,
              color: Colors.black,
            ),
          ),
        ),
      ),
    );
  }

  // 小数点键盘按钮
  Widget iconPointClick() {
    return GetBuilder<OrderController>(
      builder: (_) => InkWell(
        onTap: () {
          OrderController.oc.contactInputTotal(".");
        },
        child: Container(
          width: ScreenUtil().setWidth(150),
          height: ScreenUtil().setHeight(150),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black12, width: 1),
          ),
          child: Text(
              ".",
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 85.sp,
                fontWeight: FontWeight.w900,
                color: Colors.black,
              ),
            )
        ),
      ),
    );
  }

  // 返回图标键盘按钮
  Widget iconBackClick(Icon icon) {
    return GetBuilder<OrderController>(
      builder: (_) => InkWell(
        onTap: () {
          OrderController.oc.backInputTotal();
        },
        child: Container(
          width: ScreenUtil().setWidth(150),
          height: ScreenUtil().setHeight(150),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black12, width: 1),
          ),
          child: icon,
        ),
      ),
    );
  }
}
